<template>
	<view class="vf-img-box" :style="{width: width+'rpx', height: height+'rpx', borderRadius: radius+'rpx'}" @click="_click">
		<image class="vf-img" v-if="!isload" :class="{none: isload}" :src="defSrc" mode="aspectFill" :lazy-load="true" :style="{width: width+'rpx', height: height+'rpx', borderRadius: radius+'rpx'}"></image>
		<image class="vf-img vf-img1" :class="{none: !isload}" :src="src1" :mode="mode" @load="load" :lazy-load="true" @error="error" :style="{width: width+'rpx', height: height+'rpx', borderRadius: radius+'rpx'}"></image> 
	</view>
</template>

<script>
	import { upx2px } from '@/config/index.js'; 
	export default { 
		props: {
			src: {
				type: String,
				default: ''
			},
			// defSrc: {
			// 	type: String,
			// 	default: '/static/zhongyiyao/noImg.png'
			// },
			mode: {
				type: String,
				default: 'aspectFill'
			},
			width: {
				type: [String, Number],
				default: 300
			},
			height: {
				type: [String, Number],
				default: 300
			},
			radius: {
				type: [String, Number],
				default: 0
			}
		},
		data() {
			return {
				defSrc: '/static/noImg.png',
				isload: false,
			};
		},
		
		computed:{
			src1() {
				if(this.src) {
					if(~this.src.indexOf('?x-oss-process=image/resize')) {
						return this.src;
					} else {
						return this.src+'?x-oss-process=image/resize,h_'+Math.round(this.height * upx2px * 1.5)+',w_'+Math.round(this.width * upx2px * 1.5);
					}
				} else {
					return '/static/noImg.png'
				}
			}
		},
		
		methods:{
			load() {
				this.isload = true;
			},
			error() {
				this.isload = false;
			},
			
			_click() {
				this.$emit('click');
			}
		}
	}
</script>

<style lang="scss" scoped>
.vf-img-box{
	position: relative;
	/* #ifndef APP-NVUE */
	width: 100%;
	height: 100%;
	/* #endif */
}
.vf-img{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	/* #ifndef APP-NVUE */
	width: 100%;
	height: 100%;
	/* #endif */
}
.vf-img1{
	z-index: 2;
	/* #ifndef APP-NVUE */
	width: 100%;
	height: 100%;
	/* #endif */
}
</style>
